<!--
 * @Author: your name
 * @Date: 2021-08-06 14:49:13
 * @LastEditTime: 2021-08-06 15:32:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day05\2-伪类选择器（表单）.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
            /* .one { *}
            /* a标签的状态 */
            a:link {
                  color: red;
                  text-decoration: none;
            }
            a:visited {
                color:yellow;
            }
            a:hover {
                color:gold;
            }
            a:active {
                color:green;
            }
          div:active {
               font-size: 26px;
               color:indianred
          }
          div:hover {
              background-color: lightcoral;
              border:1px solid;
              cursor:pointer;
          }
          /* 表单样式 */
          /* 设置input框聚焦样式 */
          input[name="usename"]:focus {
              border:lightseagreen 2px solid;
              box-shadow: maroon 2px 2px 2px 2px;
          }
          /* 选择框被选中 */
          input[type="checkbox"]:checked {
              outline:rgb(202, 201, 191) 1px solid;
          }
          /* 默认选中的框 */
          input[type="checkbox"]:default {
            outline:green solid 1px;
          }
          /* 禁用元素 */
          input[type="text"]:enabled {
              background-color: lightcoral;
          }
          /* 表单验证通过 */
          input[type="text"]:valid {
              background-color: rgb(180, 128, 240);
          }
          /* 表单验证不通过 */
          input[type="text"]:invalid {
              background-color: rgb(128, 190, 240);
          }
       /* 必填项 */
       input:required {
        outline:green solid 1px;
       }
       /* 选填项 */
       input:optional { 
        outline:green solid 1px;
       }
       /* 超出范围 */
       input:out-of-range {
        outline:green solid 1px;
       }
       /* 在范围内 */
       input:in-range {
        outline:rgb(38, 0, 128) solid 1px;
       }
    </style>
</head>
<body>
    <div class="app">
        
        <h1> <a  class="one" href="https:www.baidu.com">百度一下</a></h1>
        <div>div样式测试</div>
    </div>
    <form action="">
        用户名（必填）：<input type="text" name="usename" required pattern="\w{3}"><br/>
        昵称（非必填）：<input type="text" name="name"><br/>
        年龄：<input type="number" name="age" min="10" max="30"><br/>
        爱好：<input type="checkbox">篮球
        <input type="checkbox">足球
        <input type="checkbox">乒乓球
        <br/>
        禁用：<input type="text " disabled>
    </form>
</body>